<template>
  <div class="container">
    <ElRow style="height: 100vh">
      <el-col :span="12" :xs="2" style="height: 100vh"></el-col>
      <el-col :span="12" :xs="22" style="height: 100vh">
        <ElForm
          style="
            width: 70%;
            margin: 200px 0 300px 0;
            background-color: rgb(45, 88, 192);
            padding: 15px 20px;
          "
          :model="loginData"
          :rules="rules"
          ref="loginFormRef"
        >
          <h1>hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <ElFormItem class="item" prop="username">
            <el-input
              :prefix-icon="User"
              v-model="loginData.username"
            ></el-input>
          </ElFormItem>
          <el-form-item class="item" prop="password">
            <el-input
              :prefix-icon="Lock"
              type="password"
              :show-password="true"
              v-model="loginData.password"
            ></el-input>
          </el-form-item>
          <el-form-item class="item">
            <el-button
              round
              style="
                border: 0px;
                width: 100%;
                background-color: rgb(55, 154, 255);
                color: #fff;
              "
              @click="login"
              :loading="isLoading"
            >
              <template #loading>
                <div class="custom-loading">
                  <svg class="circular" viewBox="-10, -10, 50, 50">
                    <path
                      class="path"
                      d="
                      M 30 15
                      L 28 17
                      M 25.61 25.61
                      A 15 15, 0, 0, 1, 15 30
                      A 15 15, 0, 1, 1, 27.99 7.5
                      L 15 15
                    "
                      style="
                        stroke-width: 4px;
                        fill: rgba(0, 0, 0, 0);
                        stroke: #fff;
                      "
                    />
                  </svg>
                </div>
              </template>
              登陆
            </el-button>
          </el-form-item>
        </ElForm>
      </el-col>
    </ElRow>
  </div>
</template>

<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue'
import {
  ElButton,
  ElCol,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
} from 'element-plus'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getTimeMsg } from '@/utils/time'
const $router = useRouter()
const $route = useRoute()
const userStore = useUserStore()
const loginData = reactive({
  username: '',
  password: '',
})
//获取表单vc
const loginFormRef = ref()
let isLoading = ref(false)

const login = async () => {
  try {
    //对表单进行验证
    await loginFormRef.value.validate()
    isLoading.value = true
    await userStore.userLogin(loginData)
    isLoading.value = false
    ElNotification({
      type: 'success',
      title: 'Hello',
      message: getTimeMsg(),
    })
    //如果有已经登录，那么返回上次登录位置
    const redirect = $route.query.redirect
    if (redirect) {
      $router.push(redirect as string)
    } else {
      $router.push('/')
    }
  } catch (error) {
    ElNotification({
      type: 'error',
      title: 'failure',
      message: (error as Error).message,
    })
    isLoading.value = false
  }
}

//校验用户名规则
const validatorUserName = (rule: any, value: any, callback: any) => {
  //rule 配置对象
  //value 文本输入
  //callback 放行回调
  if (value.length < 5) {
    callback(new Error('Length needs more than 5'))
  } else {
    callback()
  }
}
//校验密码规则
const validatorPassword = (rule: any, value: any, callback: any) => {
  //rule 配置对象
  //value 文本输入
  //callback 放行回调
  if (value.length < 5) {
    callback(new Error('Length needs more than 5'))
  } else {
    callback()
  }
}

//表单校验规则
const rules = {
  username: [{ validator: validatorUserName, trigger: 'change' }],
  password: [{ validator: validatorPassword, trigger: 'change' }],
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: url('../../assets/images/background.jpg') no-repeat;
  background-size: cover;
  h1,
  h2 {
    color: #fff;
  }
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 30px;
    margin-top: 25px;
  }
  .item {
    width: 80%;
    margin: 20px auto;
  }
}
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>
